<template>
    <div class="jianKang">
    	<header>
    		<span class="left"></span>
    		<span class="center">泡健康</span>
    		<router-link to='/my'><span class="right"><img src="../../static/img/logo.png"/></span></router-link>
    	</header>
    	
    	<section>
    		<div class="banner">
            <div class="swiper-container imgs">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <router-link to='/jiankangtwo'><img src="../../static/img/banner.png" style="width:100%;height:100%" /></router-link>
                    </div>
                    <div class="swiper-slide">
                         <router-link to='/jiankangtwo'><img src="../../static/img/banner.png" style="width:100%;height:100%" /></router-link>
                    </div>
                    <div class="swiper-slide">
                         <router-link to='/jiankangone'><img src="../../static/img/banner.png" style="width:100%;height:100%" /></router-link>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
                <div class="swiper-scrollbar"></div>
                </div>
            </div>
    	</section>
    	
    	
    	<section class="jiesao">
    		<div>
	    		<dl v-for='item in imges'>
	    			<router-link to='/jiankangone' tag='dt'><img :src="item.img"/></router-link>
	    			<dd>
	    				<h2>{{item.title}}</h2>
	    				<p>{{item.describe}}</p>
	    				<p>{{item.data}}</p>
	    			</dd>
	    		</dl>
    		</div>
    		
    		
    		
    		
    	</section>
    	
    </div>	
</template>


<script>
    	import axios from 'axios'
    		export default {
		    	name:'jianKang',
				  data () {
				  	return {
						imges:[],
					   currIndex:0
				     }
				  },
				  mounted () {
				  var myswiper = new Swiper('.swiper-container', {
				              autoplay: 1000,
				              pagination: '.swiper-pagination'       
				        });
				    axios.get('../../static/json/jianKang.json')
					   .then(response => {
						this.imges = response.data
						console.log(this.imges)
					}) 
				          
				 }
		}
    	</script>

<style scoped lang="less">
	@import '.././assets/less/header.less';
    @import '.././assets/css/swiper.min.css';
    @import '.././assets/less/homeIndex.less';
	
</style>
     	
